<template>
	<view class="avatar" :style="'width:'+ size +'rpx;height: '+ size +'rpx;' ">
		<image :src="avatarUrl" class="avatar-img" mode="aspectFill"></image>
		<image class="badge" :class="{male:gender === 0,female:gender === 1}" mode="scaleToFill"
			:style="'width:'+ badgeSize +'rpx;height: '+ badgeSize +'rpx;background-size:'+ badgeSize +'rpx;right:'+ ((1-1/1.414)*size/2-badgeSize/2)  +'rpx;bottom:'+ ((1-1/1.414)*size/2-badgeSize/2) +'rpx;'">
		</image>
	</view>
</template>

<script>
	export default {
		name: 'rf-avatar',
		props: {
			avatarUrl: {
				type: String,
				required: true
			},
			gender: {
				type: Number,
				required: true
			},
			size: {
				type: [String, Number],
				required: false,
				default: 100,
			},
			badgeSize: {
				type: [String, Number],
				required: false,
				default: 40,
			}
		},
		data() {
			return {

			};
		},

	}
</script>

<style>
	.avatar {
		position: relative;
		display: inline-block;
		width: 100rpx;
		height: 100rpx;

	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.badge {
		position: absolute;

		background-repeat: no-repeat;
		background-position: center center;
	}

	.male {
		background-image: url('images/male.png');
	}

	.female {
		background-image: url('images/female.png');
	}
</style>